<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
  <link rel="stylesheet" href="./css/periodic.css">
  <title>Adobe CC 周期表</title>
</head>
<body>
  <!-- 基本元素 -->
  <div class="table-top">
    <div class="column">
      <div class="col-element nonmetal">H</div>
      <div class="col-element alkaline">Li</div>
      <div class="col-element alkaline">Na</div>
      <div class="col-element alkaline">K</div>
      <div class="col-element alkaline">Rb</div>
      <div class="col-element alkaline">Cs</div>
      <div class="col-element alkaline">Fr</div>
    </div>
    <div class="column">
      <div class="col-element alkearth">Be</div>
      <div class="col-element alkearth">Mg</div>
      <div class="col-element alkearth">Ca</div>
      <div class="col-element alkearth">Sr</div>
      <div class="col-element alkearth">Ba</div>
      <div class="col-element alkearth">Ra</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Sc</div>
      <div class="col-element transitions">Y</div>
      <div class="col-element lanthanide">La</div>
      <div class="col-element actinide">Ac</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Ti</div>
      <div class="col-element transitions">Zr</div>
      <div class="col-element transitions">Hf</div>
      <div class="col-element transitions">Rf</div>
    </div>
    <div class="column">
      <div class="col-element transitions">V</div>
      <div class="col-element transitions">Nb</div>
      <div class="col-element transitions">Ta</div>
      <div class="col-element transitions">Db</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Cr</div>
      <div class="col-element transitions">Mo</div>
      <div class="col-element transitions">W</div>
      <div class="col-element transitions">Sg</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Mn</div>
      <div class="col-element transitions">Tc</div>
      <div class="col-element transitions">Re</div>
      <div class="col-element transitions">Bh</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Fe</div>
      <div class="col-element transitions">Ru</div>
      <div class="col-element transitions">Os</div>
      <div class="col-element transitions">Hs</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Co</div>
      <div class="col-element transitions">Rh</div>
      <div class="col-element transitions">Ir</div>
      <div class="col-element unknown">Mt</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Ni</div>
      <div class="col-element transitions">Pd</div>
      <div class="col-element transitions">Pt</div>
      <div class="col-element unknown">Ds</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Cu</div>
      <div class="col-element transitions">Ag</div>
      <div class="col-element transitions">Au</div>
      <div class="col-element unknown">Rg</div>
    </div>
    <div class="column">
      <div class="col-element transitions">Zn</div>
      <div class="col-element transitions">Cd</div>
      <div class="col-element transitions">Hg</div>
      <div class="col-element transitions">Cn</div>
    </div>
    <div class="column">
      <div class="col-element metalloid">B</div>
      <div class="col-element bases">Al</div>
      <div class="col-element bases">Ga</div>
      <div class="col-element bases">In</div>
      <div class="col-element bases">Tl</div>
      <div class="col-element unknown">Nh</div>
    </div>
    <div class="column">
      <div class="col-element nonmetal">C</div>
      <div class="col-element metalloid">Si</div>
      <div class="col-element metalloid">Ge</div>
      <div class="col-element bases">Sn</div>
      <div class="col-element bases">Pb</div>
      <div class="col-element bases">Fl</div>
    </div>
    <div class="column">
      <div class="col-element nonmetal">N</div>
      <div class="col-element nonmetal">P</div>
      <div class="col-element metalloid">As</div>
      <div class="col-element metalloid">Sb</div>
      <div class="col-element bases">Bi</div>
      <div class="col-element unknown">Mc</div>
    </div>
    <div class="column">
      <div class="col-element nonmetal">O</div>
      <div class="col-element nonmetal">S</div>
      <div class="col-element nonmetal">Se</div>
      <div class="col-element metalloid">Te</div>
      <div class="col-element bases">Po</div>
      <div class="col-element unknown">Lv</div>
    </div>
    <div class="column">
      <div class="col-element halogens">F</div>
      <div class="col-element halogens">Cl</div>
      <div class="col-element halogens">Br</div>
      <div class="col-element halogens">I</div>
      <div class="col-element metalloid">At</div>
      <div class="col-element unknown">Ts</div>
    </div>
    <div class="column">
      <div class="col-element noblegas">He</div>
      <div class="col-element noblegas">Ne</div>
      <div class="col-element noblegas">Ar</div>
      <div class="col-element noblegas">Kr</div>
      <div class="col-element noblegas">Xe</div>
      <div class="col-element noblegas">Rn</div>
      <div class="col-element unknown">Og</div>
    </div>
  </div>

  <!-- 外延元素 -->
  <div class="table-bottom">
    <div class="line">
      <div class="ln-element lanthanide">La</div>
      <div class="ln-element lanthanide">Ce</div>
      <div class="ln-element lanthanide">Pr</div>
      <div class="ln-element lanthanide">Nd</div>
      <div class="ln-element lanthanide">Pm</div>
      <div class="ln-element lanthanide">Sm</div>
      <div class="ln-element lanthanide">Eu</div>
      <div class="ln-element lanthanide">Gd</div>
      <div class="ln-element lanthanide">Tb</div>
      <div class="ln-element lanthanide">Dy</div>
      <div class="ln-element lanthanide">Ho</div>
      <div class="ln-element lanthanide">Er</div>
      <div class="ln-element lanthanide">Tm</div>
      <div class="ln-element lanthanide">Yb</div>
      <div class="ln-element lanthanide">Lu</div>
    </div>

    <div class="line">
      <div class="ln-element actinide">Ac</div>
      <div class="ln-element actinide">Th</div>
      <div class="ln-element actinide">Pa</div>
      <div class="ln-element actinide">U</div>
      <div class="ln-element actinide">Np</div>
      <div class="ln-element actinide">Pu</div>
      <div class="ln-element actinide">Am</div>
      <div class="ln-element actinide">Cm</div>
      <div class="ln-element actinide">Bk</div>
      <div class="ln-element actinide">Cf</div>
      <div class="ln-element actinide">Es</div>
      <div class="ln-element actinide">Fm</div>
      <div class="ln-element actinide">Md</div>
      <div class="ln-element actinide">No</div>
      <div class="ln-element actinide">Lr</div>
    </div>
  </div>
</body>
</html>